<template>
  <div class="app-container">
<!--使用el组件创建一个表单，ref="form" 给表单设置一个引用，方便后续操作 label-width 设置表单标签的宽度 v-.. 当formLoading为true时，显示加载状态
    ：rules="rules" 定义表单验证规则。-->
    <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules">
      <el-form-item label="分类编码：" prop="categoryCode"  required >
        <div style="display:flex; align-content: center">
          <el-input v-model="form.categoryCode" placeholder="分类编码" style="margin-right: 10px;"></el-input>
          <!--创建一个下拉选择框，绑定到form.categoryCode 并设置占位符和改变事件@change="levelChange"-->
          <el-select v-model="paperPage.choose" placeholder="分类编码" @change="levelChange">
            <!--使用 v-for 循环生成下拉选项，每个选项的值和标签都来自 leveEnum数组-->
            <el-option v-for="item in codeItems" :key="item.categoryCode" :value="item.categoryCode" :label="item.categoryCode"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="分类名称："  prop="categoryName" required>
        <el-input v-model="form.categoryName" placeholder="分类名称"></el-input>
      </el-form-item>
      <el-form-item label="父节点：" prop="parentId">
        <div style="display:flex; align-content: center">
          <!--创建一个下拉选择框，绑定到form.parentId,并设置占位符和改变事件@change="levelChange"-->
          <el-select v-model="form.parentId" placeholder="父节点" @change="levelChange">
            <el-option v-for="item in parentItems" :key="item.id" :value="item.id" :label="item.categoryName"></el-option>
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button @click="clearParent">清除父节点</el-button>
        </div>
      </el-form-item>
      <el-form-item label="描述："  prop="description">
        <el-input v-model="form.description" placeholder="描述"></el-input>
      </el-form-item>
      <el-form-item>
        <!--创建一个按钮，点击调用 submitForm方法-->
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
        <!--创建一个按钮，点击调用 addPaper方法   添加弹窗-->
<!--        <el-button type="success" @click="addPaper">添加数据字典</el-button>-->
      </el-form-item>
    </el-form>
    <!--添加试卷部分-->
<!--    <el-dialog :visible.sync="paperPage.showDialog" width="70%">
    &lt;!&ndash;在对话框内创建一个表单，绑定到paperPage.queryParam，设置宽度标签，加载状态和验证规则&ndash;&gt;
      <el-form :model="paperPage.queryParam" ref="queryForm" label-width="100px" v-loading="formLoading">
        <el-form-item label="分类编码：" prop="categoryCode" required>
          <div style="display:flex; align-content: center">
            <el-input v-model="paperPage.queryParam.categoryCode" placeholder="分类编码" style="margin-right: 10px;"></el-input>
            <el-select v-model="paperPage.addChoose" placeholder="分类编码" @change="levelChange">
              <el-option v-for="item in codeItems" :key="item.categoryCode" :value="item.categoryCode" :label="item.categoryCode"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="分类名称："  prop="categoryName" required>
          <el-input v-model="paperPage.queryParam.categoryName" placeholder="分类名称"></el-input>
        </el-form-item>
        <el-form-item label="父节点:" prop="parentId">
          <div style="display:flex; align-content: center">
            <el-select v-model="paperPage.queryParam.parentId" placeholder="父节点" @change="levelChange">
              <el-option v-for="item in parentItems" :key="item.id" :value="item.id" :label="item.categoryName"></el-option>
            </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button @click="addclearParent">清除父节点</el-button>
          </div>
        </el-form-item>
        <el-form-item label="描述:"  prop="description">
          <el-input v-model="paperPage.queryParam.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        &lt;!&ndash;创建一个按钮，点击时关闭对话框&ndash;&gt;
          <el-button @click="paperPage.showDialog = false">取 消</el-button>
        &lt;!&ndash;创建一个主按钮，点击时调用 confirmPaperSelect方法&ndash;&gt;
          <el-button type="primary" @click="confirmPaperSelect">确定</el-button>
     </span>
    </el-dialog>-->
    <!--结束app-container 容器的div元素-->
  </div>
</template>

<script>
/**
 * 导入相关的API**/
import dataDictionaryApi from '@/api/dataDictionary'
// import examPaperApi from '@/api/examPaper'
// import Pagination from '@/components/Pagination'
/**
 * 从Vuex中绕如 mapGetters mapState 和 mapActions辅助函数**/
import { mapGetters, mapState, mapActions } from 'vuex'

export default {
  // components: { Pagination },
  /** data(){} 定义组件的数据属性 **/
  data () {
    return {
      /** 表单数据对象，包含任务的基本信息**/
      form: {
        id: null,
        categoryCode: null,
        categoryName: null,
        parentId: null,
        description: null
      },
      parentItems: [],
      codeItems: [],
      /** formLoading: 表单的加载状态 默认为false**/
      formLoading: false,
      /**
       * 分页数据对象，包含筛选条件，多选数据 对话框显示状态
       * 查询参数 加载状态 表格数据 总条数**/
      paperPage: {
        showDialog: false,
        queryParam: {
          id: null,
          categoryCode: null,
          categoryName: null,
          parentId: null,
          description: null
        },
        choose: null,
        addChoose: null,
        listLoading: true
      },
      /**
       *定义表单验证规则 **/
      rules: {
        categoryCode: [{ required: true, message: '请输入分类编码', trigger: 'blur' }],
        categoryName: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      }
    }
  },
  /** 定义组件的声明周期钩子 created 在组建实例创建完成后调用**/
  created () {
    this.parentsearch()
    this.codesearch()
    let _this = this
    let id = this.$route.query.id
    if (id && parseInt(id) !== 0) {
      _this.formLoading = true
      dataDictionaryApi.select(id).then(re => {
        _this.form = re.response
        _this.formLoading = false
      })
    }
  },
  methods: {
    clearParent () {
      this.form.parentId = null
    },
    addclearParent () {
      this.paperPage.queryParam.parentId = null
    },
    parentsearch () {
      dataDictionaryApi.parentList(this.form).then(data => {
        const re = data.response
        this.parentItems = re
        console.log(re)
      })
    },
    codesearch () {
      dataDictionaryApi.codeList().then(data => {
        const re = data.response
        // console.log(re)
        this.codeItems = re
        // console.log(this.codeItems)
      })
    },
    /** *定义 addPaper方法 用于打开对话框进行凑所**/
    addPaper () {
      this.paperPage.showDialog = true
    },
    /**
     * 用于提交表单**/
    submitForm () {
      let _this = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.from)
          this.formLoading = true
          dataDictionaryApi.edit(this.form).then(data => {
            if (data.code === 1) {
              _this.$message.success(data.message)
              _this.delCurrentView(_this).then(() => {
                _this.$router.push('/dictionary/list')
              })
            } else {
              _this.$message.error(data.message)
            }
            _this.formLoading = false
          }).catch(e => {
            _this.formLoading = false
          })
        } else {
          return false
        }
      })
    },
    /**
     * 重置表单**/
    resetForm () {
      let lastId = this.form.id
      this.$refs['form'].resetFields()
      this.form = {
        id: null,
        categoryCode: null,
        categoryName: null,
        parentId: null,
        description: null
      }
      this.form.id = lastId
    },
    /**
     * 映射exam模块中的 initSubject动作**/
    ...mapActions('exam', { initSubject: 'initSubject' }),
    /** 用于映射tagsView模块中的delCurrentView动作**/
    ...mapActions('tagsView', { delCurrentView: 'delCurrentView' }),
    /**
     * 定义 levelChange 方法**/
    levelChange (value) {
      this.form.categoryCode = this.paperPage.choose
      this.paperPage.queryParam.categoryCode = this.paperPage.addChoose
    },
    // 确认 添加的提交
    confirmPaperSelect () {
      let _this = this
      this.$refs.queryForm.validate((valid) => {
        if (valid) {
          console.log(this.paperPage.queryParam)
          this.formLoading = true
          dataDictionaryApi.edit(this.paperPage.queryParam).then(data => {
            if (data.code === 1) {
              _this.$message.success(data.message)
              _this.delCurrentView(_this).then(() => {
                _this.$router.push('/dictionary/list')
              })
            } else {
              _this.$message.error(data.message)
            }
            _this.formLoading = false
          }).catch(e => {
            _this.formLoading = false
          })
          /** console.log('表单验证通过，准备提交:', this.paperPage.queryParam)
          _this.paperPage.showDialog = false
          // 可以在这里调用 API 提交数据**/
        } else {
          console.log('表单验证失败')
          return false
        }
      })
    }
  },
  /** 定义计算属性**/
  computed: {
    /** 映射enumItem模块中的enumFormat计算属性**/
    ...mapGetters('enumItem', ['enumFormat']),
    /** 映射enumItem模块中的状态
     * ... 用于将放回的对象展开到当前组件的计算属性中，enumItem 是要给命名空间，表示这些状态是从Vuesx store中的enumitem模块中获取的。**/
    ...mapState('enumItem', {
      /** 这行代码定义了一个名为 questionTypeEnum 的计算属性，他送state对象中提取 exam.question.typeEnum 属性。具体来说，state是
       * enumItem模块的状态对象，state.exam.question.typeEnum是该模块下的嵌套状态路径**/
      questionTypeEnum: state => state.exam.question.typeEnum,
      /** 这行代码定义来了一个名为levelEnum的计算属性。他从state对象中提取 user.levelEnum属性。同样，state是enumItem模块中的状态对象，
       * state.user.levelEnu是该模块下的嵌套状态路径**/
      levelEnum: state => state.user.levelEnum
      /** 总结：这段代码的作用是将Vuex store中的enumItem模块的 exam.question.typeEnum 和 user.levelEnum状态映射到当前Vue
       * 组件的计算属性中，使得可以在组件中直接使用 this.questionTypeEnum 和this.levelEnum来访问这些状态。**/
    }),
    /** 映射exam模块中的 subjectEnumFormat计算属性**/
    ...mapGetters('exam', ['subjectEnumFormat']),
    /** 映射exam模块中的subjects状态**/
    ...mapState('exam', { subjects: state => state.subjects })
  }
}
</script>
